import React, { useState } from 'react';
import { Menu, Switch } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import {
  HomeOutlined,
  TeamOutlined,
  InfoCircleOutlined,
  SettingOutlined,
  AppstoreOutlined
} from '@ant-design/icons';

function Navigation() {
  const navigate = useNavigate();
  const location = useLocation();
  const [theme, setTheme] = useState('light');

  const changeTheme = (value) => {
    setTheme(value ? 'dark' : 'light');
  };

  const items = [
    {
      key: '/',
      icon: <HomeOutlined />,
      label: '首页'
    },
    {
      key: '/users',
      icon: <TeamOutlined />,
      label: '用户列表'
    },
    {
      key: '/roles',  
      icon: <TeamOutlined />,
      label: '角色列表'
    },
    {
      key: 'sub1',
      icon: <AppstoreOutlined />,
      label: '功能菜单',
      children: [
        {
          key: 'sub1-1',
          label: '选项1'
        },
        {
          key: 'sub1-2',
          label: '选项2'
        },
      ]
    },
    {
      key: '/about',
      icon: <InfoCircleOutlined />,
      label: '关于'
    },
    {
      key: 'sub2',
      icon: <SettingOutlined />,
      label: '设置',
      children: [
        {
          key: 'sub2-1',
          label: '系统设置'
        },
        {
          key: 'sub2-2',
          label: '用户设置'
        }
      ]
    }
  ];

  const handleMenuClick = (e) => {
    if (e.key.startsWith('sub')) return;
    navigate(e.key);
  };

  return (
    <div>
      <div style={{ 
        marginBottom: 16, 
        padding: '8px 0',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <Switch size="small" onChange={changeTheme} /> 
        <span style={{ marginLeft: 8, fontSize: 12 }}>切换主题</span>
      </div>
      <Menu 
        mode="inline"
        theme={theme}
        items={items}
        selectedKeys={[location.pathname]}
        onClick={handleMenuClick}
        style={{ 
          width: '100%', 
          borderRight: 0
        }}
      />
    </div>
  );
}

export default Navigation;